/* 
    Document   : style
    Created on : 10-08-2010, 00:11:07
    Author     : zun
    Description:
        Purpose of the stylesheet follows.
*/

/* 
   TODO customize this sample styleadd-
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/
h1 {
    font-family:Arial;
    font-size: 24px;
    font-weight: bold;
    color:#345BAB;
}

h2 {
    font-family:Arial;
    font-size: 24px;
    font-weight: bold;
    color:#345BAB;
}

h3 {
    font-family:Arial;
    font-size: 22px;
    font-weight: bold;
    color:#345BAB;
}

table {
    font-size: 14px;
}

body{
    margin: 0px 0px 0px 0px;
    background-color:#eff6f7;
    text-align: center;
    font-size: 12px;
}

#pageWrapper{
	font-family: Arial;
	margin: 0px auto 0px auto;
    display:inline-block;
    width: 100%;
}

#headerWrapper{
    height:88px;
    background: url(../images/images/header-bg.png) repeat-x;
}

#header{
    
    height:88px;
    margin: 0px auto 0px auto;
    
}

#header #logo{
    float: left;
    margin-left: 45px;
    margin-top: 45px;
}
#header #text{
    float: right;
    margin-right: 20px;
    margin-top: 25px;
}

#horizontalMenu {
    height:22px;
	background: #333;
}
	#horizontalMenu span {
		display: block;
		background: #363636;		
    	text-align: right;
    	margin: 0px auto 0px auto;
    	padding: 4px 10px 0 0
	}
	
	#horizontalMenu a { 	
    	font-size:12px;
    	color: #fff;
    	margin-left: 6px;
 		cursor: pointer;   	
	}

	#horizontalMenu a:hover {
    	font-size:12px;
    	color: #a1ced3;
    	margin-left: 6px;
    	cursor: pointer;
	}

#container {
    float: left;
    width: 100%;
    min-height: 450px;
    background-color:#fff;
    text-align: left;
    margin-bottom: 1px;
}

#body {
	width: 100%;
    min-height: 450px;
    background-color:#fff;
    text-align: left;
    margin-bottom: 1px;
}

#leftMenu{
    width:15%;
    min-height:450px;
    padding-left: 8px;
    float:left;
    background-color: white;
    border-right: #ddd 2px solid;
}
	#leftMenu h3 {
		font-size: 14px;
	}
	
	#leftMenu ul {
		list-style: none;
		padding:0px;
		margin-left: 12px;
	}

	#leftMenu ul li a {
		display: block;
		list-style: none;
    	font-family:Arial;
		font-size:12px;
		color:#666;
		padding:2px;
	}
	
	#leftMenu ul li a:hover {
		display: block;
		list-style: none;
    	font-family:Arial;
		font-size:12px;
		color:#fff;
		padding:2px;
		background-color: #50959d;
	}
	
#leftMenu_controller {
    width:190px;
    min-height:450px;
    float:left;
    background-color: white;
    border-right: #ddd 2px solid;
}
	#leftMenu_controller ul {
		list-style: none;
		padding:0px;
	}
	
	#leftMenu_controller li a {
		display: block;
		width: : 70%;
		text-align: center;
		margin: 25px auto 0 auto;
		border-left: 4px white solid;
	}
	
	#leftMenu_controller li a:hover {
		display: block;
		width: : 70%;
		text-align: center;
		margin: 25px auto 0 auto;
		border-left: 4px #50959d solid;
	}
			
	#leftMenu_controller img {
		display: block;
		margin: 0 auto 0 auto;
	}
	
	#leftMenu_controller span {
		margin: 10px 0 0 0;
	}

		
#contentArea{
    width: 75%;
    min-height:540px;
    padding-left:20px;
    padding-bottom:20px;
    float:left;
}
#contentArea-large{
    width: 980px;
    min-height:450px;
    padding-left:20px;
    padding-bottom:20px;
    float:left;
}

#frmPassword {}

	#frmPassword label {
		display: block;
		width: 200px; 
		margin: 15px 10px 0 0; 
		font-size: 14px;
	}
	
	#frmPassword input {
		margin-top: 4px;
	}
	
#footer{
    background: url("../images/images/footer.png") repeat-x scroll 0 0 transparent;
    float: left;
    height: 100px;
    width: 100%;
}

#container #img-footer{
        float: right;
    margin-bottom: 0;
    margin-left: 20.3%;
    margin-top: 1.7%;
    width: 100%;
    text-align: right;
}

a{
    font-family:"Helvetica";
    font-size: 12px;
    text-decoration: none;
    color:#345BAB;
}

ul {
    list-style: none;
    text-align: left;
}


.fleft{
    float:left;
}

.fleft a{
    color: #ffffff;
}

.fright{
    float:right;
}

.fauto{
    float:auto;
}


.img-box-profile{
    overflow: hidden;
    width:128px;
    height:128px;
/*    background: url(../images/1281367331_contact-new.png) no-repeat;*/
}
.hiden-input-file{
    height:128px;
    font-size: 128px;
    opacity:0;
}
.cursor-pointer{
    cursor:pointer;
}


.font-info
{
    font-family:"Helvetica";
    font-size:9pt;
    color:Gray;
}

.font-error
{
    font-family: Arial;
    font-size:9pt;
    color:Red;
}

.font-copyright{
    font-family: Arial;
    font-size:10pt;
    color: white;
}

.font-consignment-status{
    color:#345BAB;
}
.font-driver-name{
    color:#345BAB;
}

.font-money{
    font-family:"Arial";
    font-size: 14px;
    color:#345BAB;

}
.table-header{
    border-bottom-color:#CCCCCC;
    border-bottom-style:solid;
    border-bottom-width:1px;
}

.table-footer{
    border-top-color:#CCCCCC;
    border-top-style:solid;
    border-top-width:1px;
}

.table-row-style01{
    background-color:transparent;
    line-height: 40px;
    vertical-align: middle;
}

.table-row-style02{
    background-color:#F1F1F1;
    line-height: 40px;
    vertical-align: middle;
}

.table-row-standard{
    background-color:transparent;
    line-height: 40px;
    vertical-align: middle;
}

.table-row-red{
    background-color:tomato;
    line-height: 40px;
    vertical-align: middle;
}

.table-row-green{
    background-color:lightgreen;
    line-height: 40px;
    vertical-align: middle;
}

.table-row-orange{
    background-color:#FECA40;
    line-height: 40px;
    vertical-align: middle;
}

.table-row-hovered{
    background-color:#FBFBFB;
}

.page-number{
    line-height: 22px;
    min-width: 15px;
    display: inline-block;
    cursor: pointer;
}

a.page-number{
    padding-right:5px;
    text-decoration:none;
    font-family:"Helvetica";
    color:#345BAB;
    font-size: 12px;
}

.page-number span{
    padding-left:5px;
    display: inline-block;
    min-width: 10px;
}

.page-number-selected{
    background-image: url(../images/icons_strip.gif);
    line-height: 22px;
    min-width: 15px;
    display: inline-block;
}

a.page-number-selected{
    background-position:100% -1450px;
    padding-right:5px;
    text-decoration:none;
    font-family:"Helvetica";
    color:#345BAB;
    font-size: 12px;
}

.page-number-selected span{
    background-image: url(../images/icons_strip.gif);
    background-position:0 -1350px;
    padding-left:5px;
    display: inline-block;
    min-width: 10px;
}

.page-number-hovered{
    background-image: url(../images/icons_strip.gif);
    line-height: 22px;
    min-width: 15px;
    display: inline-block;
    cursor: pointer;
}

a.page-number-hovered{
    background-position:100% -1250px;
    padding-right:5px;
    text-decoration:none;
    font-family:"Helvetica";
    color:#345BAB;
    font-size: 12px;
}

.page-number-hovered span{
    background-image: url(../images/icons_strip.gif);
    background-position:0 -1150px;
    padding-left:5px;
    display: inline-block;
    min-width: 10px;
}

.page-number-hovered{

}

.visible{
    display:block;
}
.visible-row{
    display:table-row;
}

.invisible{
    display: none;
}

.img-company-logo{
    height:200px;
    width: auto;
}

#pnLogin{
    border: 4px solid #a1ced3;
    background: #50949d;
    width:300px;
    display:inline-block;
    margin-top:100px;
    padding-bottom: 12px;
    text-align: center;
}
	#pnLogin h2 {
		color: #fff;
	}
	
	#pnLogin label {
		float:left;
		font-size: 12px;
		color: #a1ced3;
		margin: 4px 8px 0px 50px;
		width: 60px;
	}
	#pnLogin span {
		display: block;
		text-align: left;
	}
	
#pnChangePassword{
    border-width: 1px;
    border-style: solid;
    border-color:#666666;
    width:350px;
    display:inline-block;
    margin-top:100px;
    padding-bottom:10px;
}

.box-header{
    height:24px;
    background: url(../images/jtmenu_bg.jpg) repeat-x;
}



#lbUsername{
    font-family: Arial;
    font-size: 20px;
    font-weight: bold;
    color:#345BAB;
}
#imgDelete{
    cursor: pointer;
}



.matrix-zone td{
    border-style: solid;
    border-color: #CCCCCC;
    border-width: 0.5px;
    height:30px;
    width:185px;
}

.matrix-zone table{
    border-spacing: 2px;
    border-width: 0.5px;
}
.matrix-zone input[type=text]{
    border-style: none;
    text-align: center;
    font-size: 12px;
    color:#345BAB;
    line-height: 34px;
}

.objIcon{
    height:32px;
    width:48px;
    margin: 5px 5px 5px 5px;
    float:left;
}

.objLabel{
    height:32px;
    min-width:100px;
    float:left;
    padding-top:5px;
}

#link-add-obj{
    font-size: 12px;
    font-weight:400;
    line-height: 32px;
    background: url(../images/icons/add.png) no-repeat;
    display:inline-block;
    padding-left:37px;
}

#link-import-csv{
    font-size: 12px;
    font-weight:400;
    line-height: 32px;
    background: url(../images/icons/csv.png) no-repeat 4px 4px;
    display:inline-block;
    padding-left:33px;
}

#link-generate-invoice{
    font-size: 12px;
    font-weight:400;
    line-height: 32px;
    background: url(../images/icons/invoice.png) no-repeat 4px 4px;
    display:inline-block;
    padding-left:33px;
}

#link-add-customer{
    font-size: 12px;
    font-weight:400;
    line-height: 40px;
    background: url(../images/icons/add_customer.png) no-repeat 4px 4px;
    display:inline-block;
    padding-left:40px;
}

#link-add-zone{
    font-size: 12px;
    font-weight:400;
    line-height: 40px;
    background: url(../images/icons/add_zone.png) no-repeat 4px 4px;
    display:inline-block;
    padding-left:40px;
}

#link-search-obj{
    font-size: 12px;
    font-weight:400;
    line-height: 40px;
    background: url(../images/icons/look_up.png) no-repeat 4px 4px;
    display:inline-block;
    padding-left:40px;
}

#link-services-management{
    font-size: 12px;
    font-weight:400;
    line-height: 40px;
    background: url(../images/icons/services_management.png) no-repeat 4px 4px;
    display:inline-block;
    padding-left:40px;
}

#link-view-customer-consignment{
    font-size: 12px;
    font-weight:400;
    line-height: 40px;
    background: url(../images/icons/consignment_medium.png) no-repeat 4px 4px;
    display:inline-block;
    padding-left:40px;
}

#link-edit-user{
    font-size: 12px;
    font-weight:400;
    line-height: 40px;
    background: url(../images/icons/edit_user.png) no-repeat 4px 4px;
    display:inline-block;
    padding-left:40px;
}

#link-edit-service{
    font-size: 12px;
    font-weight:400;
    line-height: 40px;
    background: url(../images/icons/edit_service.png) no-repeat 4px 4px;
    display:inline-block;
    padding-left:40px;
}

#link-add-scheme{
    font-size: 12px;
    font-weight:400;
    line-height: 40px;
    background: url(../images/icons/add_scheme.png) no-repeat 4px 4px;
    display:inline-block;
    padding-left:40px;
}

#customer-id{
    font-family: arial;
    font-size: 16px;
    font-weight: bold;
    color:#345BAB;
}

.search-panel input[type=text]{
    /*background:#FFFFFF url(../images/icons/arrow.png) no-repeat 4px 4px;*/
    padding:4px 4px 4px 10px;
    border:1px solid #CCCCCC;
    width:230px;
    height:20px;
}

.search-panel input[type=submit]{
    height: 32px;
    font-family: arial;
    font-size: 16px;
    font-weight: 400;
}

.filter-bar{
    font-size:10px;
    height:40px;
    width: 780px;
    background: url(../images/bg_filter_bar.gif) repeat-x 0px 7px;
    padding:4px 4px 4px 4px;
    text-align: right;
}

.filter-bar input[type=text]{
    font-size:10px;
    height:20px;
    width: 63px;
}

.link-view-service{
    font-size: 14px;
    font-weight:400;
    line-height: 40px;
    background: url(../images/icons/truck.png) no-repeat 4px 8px;
    display:inline-block;
    padding: 5px 10px 5px 60px;
    
}

.link-view-zone{
    font-size: 14px;
    font-weight:400;
    line-height: 40px;
    background: url(../images/icons/singapore_map.png) no-repeat 4px 8px;
    display:inline-block;
    padding: 5px 10px 5px 60px;

}

.link-view-customer{
    font-size: 14px;
    font-weight:400;
    line-height: 40px;
    background: url(../images/icons/contact.png) no-repeat 4px 4px;
    display:inline-block;
    padding: 2px 10px 2px 45px;
}

.control-panel-item{
    display:inline-block;
    width:250px;
    text-align:center;
    margin: 20px 0px 20px 0px;
}

.control-panel-item img{
    border-style: none;
    border-width: 0px;
}
.control-panel-item a{
    font-size: 16px;
}

.header-logos-panel{
    height:400px;
    width:600px;
    overflow: scroll;
    border-style: solid;
    border-color: #CCCCCC;
    border-width: 1px;
}

.header-logo-item{
    width:150px;
    height:100px;
    margin:20px 20px 20px 20px;
    display: inline-block;
}

.inline-block{
    display:inline-block;
}

#controller-dashboard-left{
    float:left;
    width:200px;
}

#controller-dashboard-right{
    float:left;
    width:700px;
}

#select-driver{
    width:200px;
}

#select-driver-column{
    float:left;
    width:250px;
}

#select-status-column{
    float:left;
    width:500px;
}
#ddlCompanies{
    margin-left:20px;
    width:300px;
    height:150px;
}

.indent-20{
    margin-left:20px;
}

#tbPeriodFrom{
    width:250px;
    float:left;
}
#tbPeriodTo{
    width:250px;
    float:left;
}

.invoice-details{
    background: url(../images/icons/invoice_2.png) no-repeat 10px 10px;
    padding: 0px 0px 0px 50px;
}

.lbFromTo{
    display: inline-block;
    padding: 0px 10px 0px 30px;
}

.standard-label{
    display: inline-block;
    font-size:13px;
}
#tbFrom{
    width:100px;
}
#tbTo{
    width:100px;
}
#tbCreateDate{
    float: left;
    margin-top: 2%;
    width: 100%;
}

#noConsignment{
    font-size: 24px;
    font-style: italic;
    color:#CCCCCC;
    text-align: center;
}

.label-add-customer{
    font-size:11px;
    display:inline-block;
    width:180px;
    text-align:left;
}

.tb-add-customer{
    width:180px;
}

#pnWalkedInCustomer{
    margin-left:30px;
}

.search-active{
    color:green;
}

.search-inactive{
    color:#CCCCCC;
    font-style: italic;
}

.search-panel-2 input[type=text]{
    background:#FFFFFF url(../images/icons/search_icon.png) no-repeat 4px 4px;
    padding:4px 4px 4px 30px;
    border:1px solid #CCCCCC;
    width:300px;
    height:20px;
}

.search-panel-2 input[type=submit]{
    height: 32px;
    font-family: arial;
    font-size: 16px;
    font-weight: 400;
}

.result-column-1{
    width:500px;
    display:inline-block;
}
.result-column-1-1{
    width:250px;
    display:inline-block;
}
.result-column-1-2{
    width:250px;
    display:inline-block;
}
.result-column-2{
    width:200px;
    display:inline-block;
}

.result-header{
    font-weight: bold;
    font-size: 15px;
    color:#345BAB;
}

.result-header-title{
    font-weight: bold;
    font-size: 11px;
}

.result-panel{
    width: 730px;
    border-style: solid;
    border-color: #F1F1F1;
    background-color: #FBFBFB;
    height: 500px;
    overflow: scroll;
    padding:10px 10px 10px 10px;
}

.result-panel span{
    margin-bottom: 5px;
}
#no-record-found{
    color:#B6B6B6;
    font-size: 14px;
    font-style: italic;
    padding-left:20px;
}

#unassigned-consignment-left{
    width:480px;
    float:left;
}
#unassigned-consignment-right{
    width:250px;
    float:left;
}

#pn-unassigned-consignments{
    width: 440px;
    border-style: solid;
    border-color: #F1F1F1;
    background-color: #FBFBFB;
    height: 500px;
    overflow: scroll;
}

.unassigned-column-1{
    width:100px;
    display:inline-block;
}
.unassigned-column-2{
    width:250px;
    display:inline-block;
    text-align:right;
}
.collection-date{
    color:blue;
}

.selected-row{
    background-color: #B6B6B6;
}

.row{
    padding:10px 10px 10px 10px;
}

.column-title{
    font-size:14px;
    padding-bottom:3px;
    color:#B6B6B6;
}
.driver-select{
    width:280px;
    font-size: 14px;
    font-weight: bold;
    color:#345BAB;
}

#search-filter-bar-1{
    width:300px;
    display:inline-block;
}
#search-filter-bar-2{
    width:450px;
    text-align: right;
    display:inline-block;
    font-size: 12px;
    color:#B6B6B6;
    font-weight:100;
}

.delivery-id{
    background:url(../images/icons/consignment_small.png) no-repeat 4px 8px;
    font-weight: bold;
    padding: 0px 20px 0px 30px;
    color:#000099;
}

.delivery-status{
    color:#345BAB;
    font-size:12px;
}

#step-title{
    display:inline-block;
}

#total-price, #total-pre-paid{
/*    display:inline-block;*/
    text-align: right;
    font-size: 18px;
    font-weight: 100;
    width: 680px;
    color:#345BAB;
}
#lbTotalPrice, #lbPrePaidThresHold{
    color:red;
}

.duplicate-link{
    background:url(../images/icons/duplicate.png) no-repeat 4px 0px;
    cursor: pointer;
    padding: 6px 10px 6px 30px;
    font-size: 12px;
    display:inline-block;
}
.delete-link{
    background:url(../images/icons/delete_2.png) no-repeat 4px 0px;
    cursor: pointer;
    padding: 6px 10px 6px 30px;
    font-size: 12px;
    display:inline-block;
}

#delivery-details{
    font-size: 12px;
    color:#CCCCCC;
    width:150px;
}
	#delivery-details label{
    display:inline-block;
    width:150px;
}

.created-date{
    font-size: 14px;
    color: #4444dd;
}
.current-status{
    font-size: 14px;
    color:#8ae234;
}

.pod-form-label{
    font-weight: 700;
    font-size: 12px;
    display: inline-block;
    width:100px;
}

#dialog-form{
    text-align: left;
}
#tbPODRemark{
    width: 250px;
}
#tbPODDate{
    width: 70px;
}
.delivery-info-block{
    display: inline-block;
    width:150px;
    text-align:center;
}
.font-highlight-info{
    font-size: 14px;
    color: #0099FF;
    font-weight: 400;
}

#tabs{
    width:700px;
}

.log-table-header{
    font-size: 14px;
    font-weight: bold;
    color:#B6B6B6;
}

.small-link{
    font-size: 11px;
}

#consignment-info-pn {
    display: inline-block;
    width: 300px;
    font-size: 12px;
    margin-left: 8px; 
    background: #eee; 
    padding: 4px;
    margin-right:40px;
}
#consignment-info-pn h4 {
	margin-top: 4px;
}
#consignment-info-pn table {
	margin: 0px;
	padding: 0px;
	
}

#consignment-info-pn table tr > td:first-child {
	width: 100px;
	margin-bottom: 2px;
	font-weight: bold;
}

#POD-panel{
    text-align: left;
    background-color: transparent;
}

.error{
    color: red;
}
.error-validate{
    float: left;
    margin-left: 100px;
    margin-top: 5px;
    width: 100%;
}

.row-red{
    color: white;
    background-color: red;
}

.row-red a, .row-red td{
    color: white;
}

.row-green{
    color: white;
    background-color: green;
}

.row-green a, .row-green td{
    color: white;
}

.row-yellow{
    color: black;
    background-color: #ffff66;
}

.row-yellow a,.row-yellow td{
    color: black;
}

.row-blue{
    color: white;
    background-color: #6666ff;
}

.row-dark-blue{
    color: white;
    background-color: #000066;
}

.row-dark-blue a, .row-dark-blue td{
    color: white;
}

.row-white{
    background-color: #ffffff;
    color: #000000;
}

.row-white a, .row-white td{
    color: #000000;
}

#pnDeliveries table{
    width: 80%;
}